JQuery

Prevent button click event from other events in jquery

Prevent button click event from other events in jquery, someone asked me to explain?

You must add type=”button” for the <button> element which will prevent from other Postback events.

I have two buttons such as upload button and submit. When I click upload button it calls the submit button. I want to prevent from that I used type=”button” for button element.

<script type="text/javascript">
$(function () {
  $('#btnUpload').click(function () {
        // Checking whether FormData is available in browser 
        if (window.FormData !== undefined) {
            var fileUpload = $("#files").get(0);
            var files = fileUpload.files;
           // Create FormData object 
            var fileData = new FormData();
            // Looping over all files and add it to FormData object 
            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }
            // Adding one more key to FormData object 
            fileData.append('username', $("#hfdSubmitId").val());
 
            $.ajax({
                url: '/Submit/CreateMedia',
                type: "POST",
                contentType: false, // Not to set any content header 
                processData: false, // Not to process data 
                data: fileData,
                success: function (result) {
                  $('#theDiv').append(result.OutputHtml);
                 
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });
        } else {
            alert("FormData is not supported.");
        }
        return false;
    });
  });
</script>
@using (@Html.BeginForm("Index", "Category", null, FormMethod.Post, new { autocomplete = "off", enctype = "multipart/form-data" }))
    {
<div class="form-group">
@Html.TextAreaFor(model => model.Description, new { Class = "form-control input-lg", id = "txtDescription", rows = "3", placeholder = "text(option)" })
@Html.ValidationMessageFor(model => model.Description)
</div>
<button class="btn" type="button" id="btnUpload" title="+ upload photos">
+ upload photos</button>
 }

 

Post your comments / questions